<template>
<div class="con">
  <!-- 导航小图标 -->
  <div class="city">
    <span class="font_p">广州</span>
    <a href="city.html"><span class="below_img" v-on:click="change()"><img src="../index/img/below.jpg" /></span></a>
    <a href="search.html"><span class="search"><img src="img/search.jpg"></span></a>
  </div>

  <div class="main">
    <!-- 大图滚动 -->
    <!-- <div class="swiper-container dtgd">
        <div class="swiper-wrapper">
            <div class="swiper-slide"><img src="img/sy_ad1.jpg"></div>
            <div class="swiper-slide"><img src="img/sy_ad2.jpg"></div>
            <div class="swiper-slide"><img src="img/sy_ad3.jpg"></div>
        </div>
        <div class="swiper-pagination dd"></div>
    </div> -->
    <!-- 5小模块 -->
    <div class="block clear">
      <div class="Bright fr">
        <a href="food.html"><img src="img/sy_block2.jpg"></a>
        <a href="supplies.html"><img src="img/sy_block3.jpg"></a>
        <a href="householdItems.html"><img src="img/sy_block4.jpg"></a>
        <a href="service.html"><img src="img/sy_block5.jpg"></a>
      </div>
      <div class="Bleft fl">
        <a href="wonderfulLife.html"><img src="img/sy_block1.jpg"></a>
      </div>
    </div>
  </div>

  <!-- 内容下 -->
  <div class="sales">
    <div class="title">
        <hr/>
        <p>特卖专区Sales</p>
    </div>
    <div class="salesCon">
      <a v-for="sale in sales" href="detail.html?id={{sale.id}}">
      <div class="blockCon">
        <img v-bind:src=sale.img>
        <p>{{sale.name}}</p>
      </div>
      </a>
    </div>
    <div class="di"></div>
  </div>
</div>
</template>

<script>
export default {
  data () {
    return {      
      sales:[
      ]

    }
  },
  methods:{
    choses:function(){   
    }
  },
  ready:function(){
    var _this = this;
    $.ajax({
      type:"GET",
      url:"http://172.16.18.44/php/hello.php?cb=JSON_CALL&",
      dataType:"jsonp",
      jsonp:"cb",
      success:function(data){
          _this.sales = data;
      }
    })
  }
}  
</script>

<style scoped>
.di{
  padding: 0.26rem;
}
html,body{
  width: 100%;
  max-width: 2000px;
} 
.con{
  /*background-color: #f2f2f2;*/
}
.con{
    height: 9%;
}
.con .city{
  position: absolute;
  top: 0;
  height: 9%;
  width: 100%;
}
span{
  font-size: 0.17rem;
  line-height: 0.45rem;
  color: white;
}
.font_p{
  position: fixed;
  padding-left: 3%;
  top: 0;
}
.below_img{
  display: inline-block;
  width: 5%;
  left: 15%;
}
.below_img img{
  width: 100%;
}

.search{
  display: inline-block;
  position: fixed;
  width: 6%;
  right: 3%;
}
.search img{
  width: 100%;
}
html,body{
  width: 100%;
  max-width: 2000px;
  background-color: #f2f2f2;
}
.main .dtgd{
  width: 100%;
}
.main .dtgd img{
  width: 100%;
}

.main .block{
  margin: 3% 3% 0 3%;
  width: 94%;
  /*border: 0.5px solid red;*/
}
.main .block a{
  float: left;
}
.main .block .Bleft{
  width: 31.2%;
}
.main .block .Bleft a{
  width: 100%;
}
.main .block .Bleft a img{
  width: 100%;
}
.main .block .Bright{
  width: 68.8%;
  /*border: 0.5px solid blue;*/
}
.main .block .Bright a{
  width: 47.7%;
  margin-left: 2.3%;
  /*margin-bottom: 2%;*/
}
.main .block .Bright a:nth-child(1){
  margin-bottom: 2%;
}
.main .block .Bright a:nth-child(2){
  margin-bottom: 2%;
}
.main .block .Bright a img{
  width: 100%;
}

.sales{
  width: 94%;
  /*border: 0.5px solid red;*/
  margin: 0 3%;
}
.sales .title{
  width: 100%;
  height: 0.5rem;
  position: relative;
}
.sales .title hr{
  position: absolute;
  top: 50%;
  width: 100%;
  z-index: -1;
}
.sales .title p{
  width: 40%;
  height: 0.5rem;
  background-color: #ffffff;
  font-size: 0.18rem;
  color: #808080;
  line-height: 0.5rem;
  text-align: center;
  margin: 0 auto;
}
.sales .salesCon{}
.sales .blockCon{
  width: 100%;
  background-color: #ffffff;
  margin-bottom: 3%;
}
.sales .blockCon img{
  width: 100%;
}
.sales .blockCon p{
  height: 0.4rem;
  line-height: 0.4rem;
  font-size: 0.15rem;
}
	.hello{
		height: 9%;
	}
	.hello .city{
		position: absolute;
		top: 0;
		height: 9%;
		width: 100%;
	}
	span{
		position: absolute;
		font-size: 0.18rem;
		line-height: 0.45rem;
		color: white;
	}
	.font_p{
	  padding-left: 3%;
    z-index: 1020;
	}
	.below_img{
    position: fixed;
	  display: inline-block;
	  width: 5%;
	  left: 14%;
    z-index: 1020;
	}
	.below_img img{
	  width: 100%;
	}
	.list{
		background: #f29004;
		width: 15%;
		position: absolute;
		left: 0.02rem;
		top: 0.45rem;
		display: none;
	}
	.list li{
		font-size: 0.18rem;
		color: white;
		text-align: center;
	}
	.search{
		display: inline-block;
		position: fixed;
		width: 6%;
		right: 4%;
    z-index: 1020;
	}
	.search img{
		width: 100%;
	}
	html,body{
	width: 100%;
	max-width: 2000px;
	background-color: #f2f2f2;
}	
</style>
